import { observer } from "mobx-react-lite"
import { Path, Rect, G, SvgProps, Defs, Stop, LinearGradient, Circle, ClipPath } from "react-native-svg"
import { useGlobalStore } from "../../mobx"
import { getColorStr } from "../../themes"
import { SvgCommon } from "./Common"

export const SvgRecord = observer((props: SvgProps) => {
    const { theme } = useGlobalStore()
    return (
        <SvgCommon {...props}>
            <Path fillRule="evenodd" clipRule="evenodd" d="M18.1996 0.442398C19.1786 0.442398 19.9725 1.30935 19.9725 2.38573V22.6032C19.9725 23.0415 19.7679 23.4507 19.4319 23.6893C19.0958 23.928 18.6721 23.9621 18.3068 23.7818L10.8939 20.1387C10.587 19.9877 10.2363 19.9877 9.9295 20.1387L2.43867 23.7867C2.07339 23.9669 1.64965 23.928 1.31359 23.6893C0.977523 23.4507 0.777832 23.0415 0.777832 22.6032V2.38573C0.777832 1.31422 1.57172 0.442398 2.55069 0.442398H18.1996ZM4.49268 6.56434C4.49268 5.82443 5.09249 5.22462 5.83239 5.22462H14.9155C15.6554 5.22462 16.2552 5.82443 16.2552 6.56434C16.2552 7.30424 15.6554 7.90405 14.9155 7.90405H5.83239C5.09248 7.90405 4.49268 7.30424 4.49268 6.56434ZM5.83239 10.4272C5.09249 10.4272 4.49268 11.027 4.49268 11.7669C4.49268 12.5068 5.09249 13.1067 5.83239 13.1067H11.4573C12.1972 13.1067 12.797 12.5068 12.797 11.7669C12.797 11.027 12.1972 10.4272 11.4573 10.4272H5.83239Z" fill="url(#paint0_linear_836_2159)"/>
            <Defs>
            <LinearGradient id="paint0_linear_836_2159" x1="10.3752" y1="0.442398" x2="10.3752" y2="23.8992" gradientUnits="userSpaceOnUse">
            <Stop stopColor={getColorStr(theme, 'color_34')} />
            <Stop offset="1" stopColor={getColorStr(theme, 'color_1')} />
            </LinearGradient>
            </Defs>
        </SvgCommon>
    )
})
